<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表拖拽改变布局</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="shadowbox">
    <div class="shadowcon" data-index="0"><div style="width: 800px;height: 400px;background-color: red;"></div></div>
    <div class="shadowcon" data-index="1"><div style="width: 800px;height: 400px;background-color: orange;"></div></div>
    <div class="shadowcon" data-index="2"><div style="width: 800px;height: 400px;background-color: yellow;"></div></div>
    <div class="shadowcon" data-index="3"><div style="width: 800px;height: 400px;background-color: green;"></div></div>
    <div class="shadowcon" data-index="4"><div style="width: 800px;height: 400px;background-color: cyan;"></div></div>
    <div class="shadowcon" data-index="5"><div style="width: 800px;height: 400px;background-color: blue;"></div></div>
    <div class="shadowcon" data-index="6"><div style="width: 800px;height: 400px;background-color: purple;"></div></div>
</div>
<div id="box">
    <div class="contain" data-index="0" style="background-color: red;">红</div>
    <div class="contain" data-index="1" style="background-color: orange;">橙</div>
    <div class="contain" data-index="2" style="background-color: yellow;">黄</div>
    <div class="contain" data-index="3" style="background-color: green;">绿</div>
    <div class="contain" data-index="4" style="background-color: cyan;">青</div>
    <div class="contain" data-index="5" style="background-color: blue;">蓝</div>
    <div class="contain" data-index="6" style="background-color: purple;">紫</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>